<template>
  <div class="son">
    <h2>我是子组件-son.vue</h2>
    <button @click="fn1">直接修改msg</button>
    <button @click="fn2">修改obj里的属性</button>
    <button @click="fn3">修改obj的指向</button>
    <button @click="fn4">点我通知父修改</button>

    <p>父传递来的msg是： {{ msg }}</p>
    <p>父传递来的number是： {{ number }}</p>
    <p>父传递来的obj是： {{ obj }}</p>
  </div>
</template>

<script>
export default {
  // 需要父组件传递一个数据，数据名叫msg（msg可以理解为像函数里的形参名）
  props: ["msg", "number", "obj"],

  methods: {
    fn1() {
      // 报错，破坏了单向数据流
      this.msg = "萨瓦迪卡，要不要按摩咖";
    },

    fn2() {
      // 不报错，改的并不是栈
      this.obj.name = "andy";
      this.obj.age = 25;
    },

    fn3() {
      // 会报错，破坏了单向数据流
      this.obj = { name: "andy", age: 25 };
    },

    fn4 () {
        this.$emit('changeMsg', '喵喵喵')
    }
  },
};
</script>

<style>
.son {
  width: 450px;
  height: 260px;
  border: 1px solid #000;
}
</style>